<template>
  <a-modal
    width="700px"
    :footer="null"
    :maskClosable="false"
    :closable="false"
    :mask="false"
    v-model:open="modalShow"
    :wrap-style="{ overflow: 'hidden' }"
  >
    <template #title>
      <div class="title">
        <modalTitle :is-position="false" @close="modalShow = false" :title="'报警事件统计分析'"></modalTitle>
        <div class="title-btn" @click="emit('sbxxModalShow')">查看时间处理人员分布</div>
      </div>
    </template>
    <div style="padding: 0 10px 10px 10px">
      <div class="top">
        <div class="top_item" style="flex: 1">
          <a-range-picker @change="timeChange" v-model:value="searchData.createtime" />
        </div>
        <div class="top_item" :class="searchData.is_solve === 1 ? 'top_item_active' : ''" @click="isSolveChange(1)">
          <div class="top_item_leftIcon"></div>
          <div class="top_item_name">待处理</div>
          <div class="top_item_num">{{ countData.dcl }}</div>
        </div>
        <div class="top_item" :class="searchData.is_solve === 3 ? 'top_item_active' : ''" @click="isSolveChange(3)" style="margin: 0 10px">
          <div class="top_item_leftIcon"></div>
          <div class="top_item_name">处理中</div>
          <div class="top_item_num">{{ countData.clz }}</div>
        </div>
        <div class="top_item" :class="searchData.is_solve === 2 ? 'top_item_active' : ''" @click="isSolveChange(2)">
          <div class="top_item_leftIcon"></div>
          <div class="top_item_name">已处理</div>
          <div class="top_item_num">{{ countData.ycl }}</div>
        </div>
        <!-- <div class="top_item" :class="searchData.is_solve === 4 ? 'top_item_active' : ''" @click="isSolveChange(4)"
          style="margin: 0 10px;">
          <div class="top_item_leftIcon"></div>
          <div class="top_item_name">已逾期</div>
          <div class="top_item_num">{{ countData.yyq }}</div>
        </div> -->
      </div>
      <mTable :titleData="titleData" :valueData="valueData" @click-btn="rowClick"></mTable>
      <modalPage ref="pageRef" @pageChange="pageChange" :total="total"></modalPage>
    </div>
  </a-modal>
</template>
<script setup>
import $api from "@/utils/request.js"
import { reactive, ref, watch } from "vue"
import modalTitle from "../modalTitle.vue"
import mTable from "../mTable.vue"
import modalPage from "../modalPage.vue"
const modalShow = ref(false)
const titleData = [
  {
    name: "编号",
    key: "id",
    style: {
      width: "40px"
    }
  },
  {
    name: "事件类型",
    key: "appear_type",
    style: {
      width: "80px"
    }
  },
  {
    name: "警告等级",
    key: "hazard_level",
    text: "低级",
    style: {
      width: "60px"
    }
  },
  {
    name: "警告类型",
    key: "alarm_type",
    style: {
      width: "80px"
    }
  },
  {
    name: "警告事件",
    key: "title",
    style: {
      flex: 1
    }
  },
  {
    name: "警告地点",
    key: "event_address",
    style: {
      width: "80px"
    }
  },
  {
    name: "警告时间",
    key: "createtime",
    style: {
      width: "60px"
    }
  },
  {
    name: "状态",
    key: "is_solve",
    style: {
      width: "50px"
    }
  },
  {
    name: "操作",
    type: "btn",
    btns: ["查看详情"],
    style: {
      width: "100px"
    }
  }
]
const valueData = ref([])

const emit = defineEmits(["rowClick", "sbxxModalShow"])
const rowClick = (e) => {
  emit("rowClick", e)
}
const close = () => {
  modalShow.value = false
}
const pageRef = ref(null)
const isSolveChange = (e) => {
  searchData.value.is_solve = e
  searchData.value.page = 1
  pageRef.value.resetPage()
  getList()
}
const show = (e) => {
  if (e) {
    searchData.value.is_solve = e
  }
  getList()
  getCount()
  modalShow.value = true
}

const countData = ref({
  dcl: 0,
  ycl: 0,
  clz: 0,
  yyq: 0
})
const getCount = async () => {
  const res = await $api.get("/api/index/get_appeal_solve", { big_type: 4 })
  if (res.code === 1) {
    res.data.forEach((e) => {
      if (e.type === 1) {
        countData.value.dcl = e.value
      } else if (e.type === 2) {
        countData.value.ycl = e.value
      } else if (e.type === 3) {
        countData.value.clz = e.value
      } else if (e.type === 4) {
        countData.value.yyq = e.value
      }
    })
  }
}
const total = ref(0)
const pageChange = (e) => {
  searchData.value.page = e
  getList()
}
const timeChange = (e) => {
  console.log(e)
  getList()
}

const searchData = ref({
  pagesize: 10,
  page: 1,
  is_solve: 1,
  big_type: 4,
  createtime: []
})

const getList = async () => {
  let createtime = []
  if (searchData.value.createtime && searchData.value.createtime.length) {
    createtime = searchData.value.createtime.map((e) => Number(e))
  }
  const res = await $api.get("/api/index/get_appeal_list", {
    ...searchData.value,
    createtime
  })
  if (res.code === 1) {
    res.data.data.forEach((e) => {
      if (e.is_solve === "1") {
        e.state = "待处理"
      } else if (e.is_solve === "2") {
        e.state = "已处理"
      } else if (e.is_solve === "3") {
        e.state = "处理中"
      } else if (e.is_solve === "4") {
        e.state = "已逾期"
      }
    })
    total.value = res.data.total
    valueData.value = res.data.data
  }
}
defineExpose({ show, close })
</script>
<style scoped lang="less">
.title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;

  .title-btn {
    padding: 6px 20px;
    background: #4ddecf40;
    border: 1px solid #4ddecf;
    border-radius: 99px;
    color: #fff;
  }
}

.top {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;

  .top_item_active {
    border: 2px solid #1e6579;
  }

  .top_item {
    width: 120px;
    padding: 3px 10px 3px 3px;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, rgba(158, 247, 255, 0.1) 0%, rgba(0, 238, 255, 0) 100%);

    // border: 1px solid;
    // border-image-source: linear-gradient(180deg, rgba(30, 121, 88, 0) 0%, #1E6579 100%);
    .top_item_name {
      font-size: 10px;
      color: rgba(213, 242, 255, 1);
      flex: 1;
    }

    .top_item_num {
      color: rgba(158, 247, 255, 1);
      font-weight: bold;
      font-size: 12px;
    }

    .top_item_leftIcon {
      background-image: url("/img/myimg/lefticon1.png");
      background-size: 17px 15px;
      width: 17px;
      height: 15px;
    }
  }
}
</style>

<style></style>
